package comp
{
	use namespace comp_layout;
	
	import comp.Interface.IDispose;
	import comp.style.css.CssAchieve;
	import comp.style.skin.*;
	import comp.style.state.SkinSprite;
	import comp.style.state.SkinState;
	import comp.style.theme.ScrollBarTheme;
	
	import flash.display.BitmapData;
	import flash.display.DisplayObject;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Rectangle;

	/**
	 * <h1>滚动条</h1>
	 * 支持换肤</br>
	 * 样式:topSkin上箭头默认,topOverSkin上箭头划过,topDownSkin上箭头按下,
	 * bottomSkin,bottomOverSkin,bottomDownSkin,
	 * middleSkin,middleOVerSkin,middleDownSkin.</br>
	 * 背景:backgroundImage,backgroundColor,backgroundRepeat(false|true);
	 * </br>
	 * 
	 * 示例comp.Panel 233
	 * @author:pu
	 * data:2010.9.28
	 */
	public class RollBar extends UIComponent
	{
		include "style/BorderStyles";

		//*************************
		//样式
		//*************************
		private var _topSkin:Class;//上箭头默认
		private var _topOverSkin:Class;//上箭头划过
		private var _topDownSkin:Class;//上箭头按下

		private var _bottomSkin:Class;//下箭头默认
		private var _bottomOverSkin:Class;//下箭头划过
		private var _bottomDownSkin:Class;//下箭头按上
		
		private var _middleSkin:Class;///拉动条默认
		private var _middleOverSkin:Class;//拉动条划过
		private var _middleDownSkin:Class;//拉动条按下
		
		private var _autoSize:Boolean;//中间滚动条自动增加
		
		public function RollBar()
		{
			super();
			
			addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
			addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
			addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
			_skinState=new Object;//当前皮肤
			
			this._themeName="comp::RollBar";
		}
		

		public function get middleDownSkin():Class
		{
			return _middleDownSkin;
		}

		public function set middleDownSkin(value:Class):void
		{
			_middleDownSkin = value;
		}

		public function get middleOverSkin():Class
		{
			return _middleOverSkin;
		}

		public function set middleOverSkin(value:Class):void
		{
			_middleOverSkin = value;
		}

		public function get middleSkin():Class
		{
			return _middleSkin;
		}

		public function set middleSkin(value:Class):void
		{
			_middleSkin = value;
		}

		public function get bottomDownSkin():Class
		{
			return _bottomDownSkin;
		}

		public function set bottomDownSkin(value:Class):void
		{
			_bottomDownSkin = value;
		}

		public function get bottomOverSkin():Class
		{
			return _bottomOverSkin;
		}

		public function set bottomOverSkin(value:Class):void
		{
			_bottomOverSkin = value;
		}

		public function get bottomSkin():Class
		{
			return _bottomSkin;
		}

		public function set bottomSkin(value:Class):void
		{
			_bottomSkin = value;
		}

		public function get topDownSkin():Class
		{
			return _topDownSkin;
		}

		public function set topDownSkin(value:Class):void
		{
			_topDownSkin = value;
		}

		public function get topOverSkin():Class
		{
			return _topOverSkin;
		}

		public function set topOverSkin(value:Class):void
		{
			_topOverSkin = value;
		}

		public function get topSkin():Class
		{
			return _topSkin;
		}

		public function set topSkin(value:Class):void
		{
			_topSkin = value;
		}
		//**************** 属性 ******************
		
		/**
		 * 中间滚动条是否自己适应大小
		 */
		public function get autoSize():Boolean
		{
			return _autoSize;
		}
		
		public function set autoSize(value:Boolean):void
		{
			_autoSize = value;
		}
		
		/**
		 * 滚动目标的当前显示区域
		 */
		public function get currRect():Rectangle
		{
			return _currRect;
		}
		
		public function set currRect(value:Rectangle):void
		{
			_currRect = value;
		}
		
		/**
		 * 滚动目标
		 */
		public function get target():UIComponent
		{
			return _target;
		}
		
		/**
		 * @private
		 */
		public function set target(value:UIComponent):void
		{
			_target = value;
		}
		
		//**************** 公共的方法 ******************
		public function bindTarget(target:UIComponent):void
		{
			_target=target;
			this._currRect=target.scrollRect;
			this._wholeRect=target.wholeRect;
			this.height=_currRect.height;
			_target.removeEventListener(Event.ADDED_TO_STAGE,addToTarget);
			_target.addEventListener(Event.ADDED_TO_STAGE,addToTarget);
		}
		
		protected function addToTarget(e:Event):Boolean
		{
			if(_target && _target.parent)
			{
				this.initialize();
				_target.parent.addChild(this);
				this.x=_target.width-_target.getStyle("scrollbarMarginRight");
				this.y=_target.getStyle("scrollbarMarginTop");
				_target.removeEventListener(Event.ADDED_TO_STAGE,addToTarget);
				return true;
			}
			return false;
		}
		
		//*********************** override *******************
		/**
		 * 创建显示容器
		 */
		override protected function createChildren():void
		{
			_topBtn=new Sprite;
			_middleBtn=new Sprite;
			_bottomBtn=new Sprite;
			
			_topBtn.name="top";
			_middleBtn.name="middle";
			_bottomBtn.name="bottom";
			
			_topBtn.mouseChildren=false;
			_middleBtn.mouseChildren=false;
			_bottomBtn.mouseChildren=false;
			
			addChild(_topBtn);
			addChild(_middleBtn);
			addChild(_bottomBtn);
		}
		
		override protected function commitStyles():void
		{
			topSkinState=new SkinState(_topBtn);	
			middleSkinState=new  SkinState(_middleBtn);
			bottomSkinState=new  SkinState(_bottomBtn);
			
			var tps:*=getStyle("topSkin");
			topSkinState.registState("Skin",new SkinSprite(tps,tps));
			topSkinState.registState("OverSkin",new SkinSprite(getStyle("topOverSkin"),tps));
			topSkinState.registState("DownSkin",new SkinSprite(getStyle("topDownSkin"),tps));
			
			var msk:*=getStyle("middleSkin");
			middleSkinState.registState("Skin",new SkinSprite(msk,msk));
			middleSkinState.registState("OverSkin",new SkinSprite(getStyle("middleOverSkin"),msk));
			middleSkinState.registState("DownSkin",new SkinSprite(getStyle("middleDownSkin"),msk));
			
			var bsk:*=getStyle("bottomSkin");
			bottomSkinState.registState("Skin",new SkinSprite(bsk,bsk));
			bottomSkinState.registState("OverSkin",new SkinSprite(getStyle("bottomOverSkin"),bsk));
			bottomSkinState.registState("DownSkin",new SkinSprite(getStyle("bottomDownSkin"),bsk));
			
			_skinState["top"]=topSkinState;
			_skinState["middle"]=middleSkinState;
			_skinState["bottom"]=bottomSkinState;
			
			viewSkin(_topBtn,"Skin");
			viewSkin(_middleBtn,"Skin");
			viewSkin(_bottomBtn,"Skin");
			
			_realHeight=this.height-_topBtn.height-_bottomBtn.height;
			_middleBtn.x=(width-_middleBtn.width)/2;
			_bottomBtn.y=height-_bottomBtn.height;
		}
		
		override protected function merge():void
		{
			var ry:Number=0;
			
			if(this._currRect && this.wholeRect)
			{
				scale=_currRect.height/wholeRect.height;
				ry=_currRect.y*scale;
			}
				
			_middleBtn.y=_topBtn.height+ry;
			
			if(this.getStyle("autoSize"))
			{
				var rl:Number=_realHeight*scale;
				if(rl>_middleBtn.height)
					_middleBtn.height=rl;
			}
			
			CssAchieve.mergeBackGrounde(this);
		}
		
		override public function dispose():void
		{
			super.dispose();
			_topSkin=null;
			_topOverSkin=null;
			_topDownSkin=null;
			_bottomSkin=null;
			_bottomOverSkin=null;
			_bottomDownSkin=null;
			_middleSkin=null;
			_middleOverSkin=null;
			_middleDownSkin=null;
			
			_skinState=null;//当前皮肤
			
			removeEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
			removeEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
			removeEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
			if(this.stage)
			{
				this.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
				this.stage.removeEventListener(MouseEvent.MOUSE_MOVE,onDrage);
			}
			
			for(var i:uint=numChildren;i>0;i--)
			{
				var dis:DisplayObject=getChildAt(0);
				if(dis is IDispose)
					(dis as IDispose).dispose();
				dis=null;
				removeChildAt(0);
			}
			
			if(parent)
				parent.removeChild(this);
		}
		
		//********************** 受保护的方法 ****************************
		
		protected function rollOverHandler(e:MouseEvent):void
		{
			_state="OverSkin";
			if(e.target is Sprite && e.target!=this)
			{
				viewSkin(e.target,_state);
			}
		}
		
		protected function rollOutHandler(e:MouseEvent):void
		{

		}
		
		protected function mouseDownHandler(e:MouseEvent):void
		{
			_state="DownSkin";
			if(e.target is Sprite && e.target!=this)
			{
				viewSkin(e.target,_state);
				if(e.target.name=="middle")
				{
					_isDrage=true;
					_clickY=e.stageY;//点击点Y座标
					this.stage.addEventListener(MouseEvent.MOUSE_MOVE,onDrage);
					this.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
				}else if(e.target.name=="top")
					scroll(-20*scale);
				else if(e.target.name=="bottom")
					scroll(20*scale);
			}
		}
		
		protected function mouseUpHandler(e:MouseEvent):void
		{
			_state="Skin";
			stopMiddleDrag();
			viewSkin(_middleBtn,_state);
		}
		
		/**
		 * 停止中单滚动条滚动
		 */
		protected function stopMiddleDrag():void
		{
			_isDrage=false;
			if(stage)
				this.stage.removeEventListener(MouseEvent.MOUSE_MOVE,onDrage);
		}
		
		/**
		 * 开始滚动
		 */
		protected function _scrollFunction(num:Number):void
		{
			trace(num);
			this._currRect=this.target.scrollRect;
			_currRect.y=num;
			this.target.scrollRect=_currRect;
		}
		
		/**
		 * 显示皮肤
		 */
		protected function viewSkin(obj:Object,state:String):void
		{
			var s:SkinState=_skinState[obj.name];
			if(s)
				s.changeState(state);			
		}
		
		/**
		 * 托动的时候发生
		 */
		protected function onDrage(e:MouseEvent):void
		{
			if(_isDrage)
			{
				var dy:Number=e.stageY-_clickY;
				_clickY=e.stageY;
				scroll(dy);
			}
		}

		/**
		 * 滚动的时候发生
		 */
		private function scroll(num:Number):void
		{
			var y:Number=_middleBtn.y+num;//滚动距离
			var truey:Number=height-_bottomBtn.height-_middleBtn.height;//滚动高度
			if(y<_topBtn.height)
			{
				y=_topBtn.height;
				num=0;
			}
			if(y>truey)
			{
				y=truey;
				num=0;
			}
				
			_middleBtn.y=y;//滚动
			
			var dy:Number=_middleBtn.y-_topBtn.height;
				
			if(_scrollFunction!=null)
			{
				if(this.getStyle("autoSize"))
					_scrollFunction(dy*this.wholeRect.height/truey)//;目标对像滚动距离
				else
				{
					if(dy>maxHeight)
						dy=maxHeight;					
					_scrollFunction(dy*(this.wholeRect.height-height)/(truey -_topBtn.height))//;目标对像滚动距离
				}

			}
				
		}
	
		//private
		private var _clickY:Number;//记录当前点击位置    
		private var _originalY:Number;//滚动条原始座标Y位置
		private var _currRect:Rectangle;//滚动的矩形区域；
		private var _target:UIComponent;//滚动目标
		
		//滚动时触发	
		private var _state:String;//鼠标状态
		private var _skinState:Object;//当前皮肤
		private var _isDrage:Boolean=false;//是否拖动
		private var _realHeight:Number;//滚动计算的真实高度
		private var scale:Number//比例
		private var topSkinState:SkinState;
		private var bottomSkinState:SkinState;
		private var middleSkinState:SkinState;
		private var _middleBtn:Sprite;
		private var _topBtn:Sprite;
		private var _bottomBtn:Sprite;
		
	}
}